import React, { Component } from 'react';

/* 
  组件挂载的时候
  1. constructor
  render
*/
class Demo extends Component{

  state = {}
  static getDerivedStateFromProps(props,state){
    console.log(props);
    // return null;
    return {
      ...props   //将父组件传入的"🐂" 存在本组件的状态(state)中
    }
  }
  render(){
    return <h1>Demo组件</h1>
  }
}
class App extends Component {
  state = {

  }
  constructor(props){
    super(props);
    console.log("1. 执行App组件的构造函数");
  }
  static getDerivedStateFromProps(props,state){ 
    //静态属性static   props父组件传入的参数 , state 父组件传入的状态
    console.log("@",props)// 没有父组件-空对象:{}
    console.log("2. 执行App组件的 getDerivedStateFromProps")
    // return null; 表示不会和当前状态合并
    return {
      ...props,
      msg:"( ఠൠఠ )ﾉ"
    }
  }
  render() {
    console.log("3.执行App组件的 render函数");
    return (
      <div>
        <Demo msg={"🐂"}></Demo>
      </div>
    );
  }
  componentDidMount(){
    console.log("4. 执行App组件中的 componentDidMount");
  }
}

export default App;
